<template>   
    <transition-group name="taglist-moving-animation">
        <Tag 
            type="dot"
            v-for="item in pageTagsList" 
            :key="item.name" 
            :name="item.name" 
            @on-close="closePage($event,item.name,item.path)"
            @click.native="linkTo(item.name,item.path, item.title)"
            :closable="item.title==='首页'?false:true"
            :color="item.children.length> 0 ?(item.children[0].path===currentPagePath?'blue':'default'):(item.path===currentPagePath?'blue':'default')"
        >{{ item.title }}</Tag>
    </transition-group>  
</template>
<style>
    .tags-con {
        white-space: nowrap;
    }
    
    .tags-con>span {
        display: block;
        overflow-x: auto;
    }
</style>
<script>
    import dom from '@/libs/dom.js';
    import {
        mainRouter
    } from '@/router/index.js'
    import {
        mapGetters
    } from 'vuex'
    export default {
        name: 'tagsPageOpened',
        data() {
            return {
                currentPagePath: this.$route.fullPath
            };
        },
        props: {
            pageTagsList: Array
        },
        computed: {
            ...mapGetters({
                pageOpenedList: 'pageOpenedList'
            })
        },
        methods: {
            closePage(event, name, path) {

                if (path.indexOf('voicecall') > -1) {
                    this.$Modal.confirm({
                        title: '提示',
                        content: '<p>确认关闭该页面吗？</p>',
                        onOk: () => {
                            //清空来电话信息
                            this.$store.commit('clearCallUserInfo')

                            this.$store.commit('removePathTag', path);
                            if (this.currentPagePath === path) {
                                let lastPagePath = '';
                                if (this.pageOpenedList.length > 1) {
                                    lastPagePath = this.pageOpenedList[1].path;
                                } else {
                                    lastPagePath = this.pageOpenedList[0].path;
                                }
                                this.$router.push({
                                    path: lastPagePath
                                });
                            }
                        },
                        onCancel: () => {

                        }
                    });
                } else {
                    if (name == 'callconfirm_index') {
                        this.$store.dispatch('setCacheExcludeComponentName', ['callConfirm'])
                    }
                    this.$store.commit('removePathTag', path);
                    if (this.currentPagePath === path) {
                        let lastPagePath = '';
                        if (this.pageOpenedList.length > 1) {
                            lastPagePath = this.pageOpenedList[1].path;
                        } else {
                            lastPagePath = this.pageOpenedList[0].path;
                        }
                        this.$router.push({
                            path: lastPagePath
                        });
                    }
                }



            },
            linkTo(name, path, title) {
                let ele = document.querySelectorAll('.ivu-menu-item')[1]
                let pathName = this.$route.name

                if (pathName === 'voicecall_index') {
                    dom.addClass(ele, 'ivu-menu-item-active')
                } else if (pathName === 'callConfirm_index') {
                    dom.removeClass(ele, 'ivu-menu-item-active')
                }
                this.$router.push({
                    path: path
                });

                // this.$store.commit('updateRouter', true)
                // mainRouter.children.map((val, index) => {
                //     console.log(val)
                //     if (val.path == '/voicecall') {
                //         val.meta.keepAlive = true
                //     }
                // })
                // console.log(mainRouter.children)
            }
        },
        watch: {
            '$route' (to) {
                this.currentPagePath = to.fullPath
            }
        }
    };
</script>
<style>
    /* .tags-con .ivu-tag:first-child {
        display: none;
    } */
</style>